package myJs.cps

import myJs.myPkg.reactHookForm._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.scalajs.js

/** Created by yz on 3/11/2020
  */
@react object InputInlineCp {

  case class Props(
      useForm: UseFormRT,
      name: String,
      registerOptions: RegisterOptions = RegisterOptions(),
      onChange: js.UndefOr[String => Unit] = js.undefined,
      value: String,
      label: String,
      labelWidth: Int = 2,
      inputWidth: Int = 4,
      placeHolder: String = "",
      readOnly: Boolean = false,
      `type`: String = "text"
  )

  val component = FunctionalComponent[Props] { props =>
    val hasErrorCls =
      if (props.useForm.formState.errors.isDefinedAt(props.name)) "has-error"
      else ""

    div(
      className := s"form-group ${hasErrorCls}",
      label(
        className := s"control-label col-sm-${props.labelWidth}",
        s"${props.label}:"
      ),
      div(
        className := s"col-sm-${props.inputWidth}",
        PureInputCp(
          useForm = props.useForm,
          name = props.name,
          registerOptions = props.registerOptions,
          onChange = props.onChange,
          value = props.value,
          placeHolder = props.placeHolder,
          readOnly = props.readOnly,
          `type` = props.`type`
        )
      )
    )

  }

}
